'use client';

import { useEffect } from 'react';
import { useGlobalState } from '../context/GlobalStateContext';
import '../globals.css';

// 扩展Window接口以包含textDemo属性
declare global {
  interface Window {
    textDemo?: {
      inputText: string;
      setInputText: (text: string) => void;
    };
  }
}

export default function TextBinding() {
  const { state, updateTextBinding } = useGlobalState();
  const { inputText } = state.textBinding;

  // 在控制台暴露状态以便验证
  useEffect(() => {
    window.textDemo = {
      inputText,
      setInputText: updateTextBinding
    };
    
    console.log('文本绑定示例已加载。使用 window.textDemo 对象进行控制台验证。');
    console.log('可验证的属性和方法：inputText, setInputText');
  }, [inputText, updateTextBinding]);

  return (
    <div className="container">
      <h1>文本绑定示例</h1>
      <p>在React中，通过结合useState和事件处理可以实现双向数据绑定：</p>
      
      <div>
        <label htmlFor="inputText">输入文本：</label>
        <input 
          id="inputText"
          value={inputText} 
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateTextBinding(e.target.value)} 
          placeholder="在这里输入文本"
        />
      </div>
      
      <div className="display-area">
        <p>显示区域：<span>{inputText || '尚未输入'}</span></p>
      </div>
      
      <div className="instructions">
        <h3>控制台验证说明：</h3>
        <p>1. 在输入框中输入文本，会自动同步到显示区域</p>
        <p>2. 打开浏览器控制台，输入 <code>window.textDemo.inputText</code> 查看当前值</p>
        <p>3. 在控制台中输入 <code>window.textDemo.setInputText('新值')</code> 来设置新值</p>
        <p>4. 观察输入框和显示区域自动更新</p>
      </div>
      
      <div className="advantages">
        <h3>React 双向文本绑定的优势</h3>
        <ul>
          <li>使用useState Hook管理状态，代码简洁</li>
          <li>数据变化自动触发组件重新渲染</li>
          <li>单向数据流结合事件处理实现双向绑定</li>
          <li>类型安全，减少运行时错误</li>
        </ul>
      </div>
    </div>
  );
}